<!-- 主页-正常课 -->
<template>
  <div class="grayBg">
    <div class="searchPart pds whiteBg mb4">
      <van-tabs v-model="active" type="card" @change='getActive'>
        <van-tab title="昨天"></van-tab>
        <van-tab title="同比2021年"></van-tab>
        <van-tab title="同比2020年"></van-tab>
      </van-tabs>
      <!-- <div v-if="active==0">
        <van-field
          readonly
          clickable
          label="日期"
          :value="dateVal"
          placeholder="请选择日期"          
          @click="isDate = true"
        />
      </div> -->
      <div class="flex flexCenter" v-show="active>0">
        <van-field
          readonly
          clickable
          label="选择月份"
          :value="monthStr"
          placeholder="请选择月份"          
          @click="isMonth = true"
        />
        <van-field
          readonly
          clickable
          label="选择周"
          :value="weekStr"
          placeholder="请选第几周"
          @click="isWeek = true"
        />
      </div>
    </div>
    <div class="whiteBg pds reportPart">
      <!--销售总和-->
      <div class="subTitle mt4 flex alignCenter">
        <div class="h4 fontSize18 fontbold">销售总和</div>
        <div class="fontSize16 fontbold allCount colorBlue fontbold">{{allData.num}}</div>
        (<div :class="{'colorGreen':allData.ratio<0,'colorRed':allData.ratio>0}">{{allData.showRatio}}<span v-if="allData.ratio">%</span></div>
        <van-icon name="down" :class="{'colorGreen':allData.ratio<0,'colorRed rotate180':allData.ratio>0}"/>)
      </div>
      <ul class="flex" style="flex-wrap: wrap;">
        <li v-for="(item,index) in saleInfo.total" :key="index" class="center" style="width:33.3%;padding:0.2rem">
          <div class="fontbold fontSize16">{{item.tit}}</div>
          <div class="colorBlue fontbold">{{item.num}}</div>
          <div class="flex flexCenter alignCenter fontSize12" :class="{'colorGreen':item.ratio<0,'colorRed':item.ratio>0}">
            <div>{{item.showRatio}}<span v-if="item.ratio">%</span></div>
            <van-icon name="down" v-if="item.ratio" :class="{'rotate180':item.ratio>0}" />
          </div>
        </li>
      </ul>
      <!-- <van-row>
        <van-col span="8" v-for="(item,index) in saleInfo.total" :key="index">
          <div class="fontbold fontSize16">{{item.tit}}</div>
          <div class="colorBlue fontbold">{{item.num}}</div>
          <div class="flex flexCenter alignCenter fontSize12" :class="{'colorGreen':item.ratio<0,'colorRed':item.ratio>0}">
            <div>{{item.showRatio}}<span v-if="item.ratio">%</span></div>
            <van-icon name="down" v-if="item.ratio" :class="{'rotate180':item.ratio>0}" />
          </div>
        </van-col>
      </van-row> -->
      <!--渠道销售额-->
      <div class="fontSize18 fontbold subTitle mt20" v-show="saleInfo.channel.length>0">渠道销售额(W)</div>
      <div class="flex center tableTree mt20" v-show="saleInfo.channel.length>0">
        <div class="w20">
          <div class="brandName li fontSize14">渠道/品牌</div>
          <div class="li fontSize13 H50 lineH50 tableHTitleBg" v-for="(item,index) in channelTitle" :key="index">{{item.name}}</div>
        </div>
        <div v-for="(item,index) in saleInfo.channel" :key="index" class="w16">
          <div class="brandName fontSize14 fontbold li">{{item.name}}</div>
          <div v-for="(el,elindex) in item.channel" :key="elindex" class="li H50 flex flexColumn flexCenter">
            <div class="colorBlue fontbold">{{el.num}}</div>
            <div class="flex flexCenter alignCenter fontSize12" :class="{'colorGreen':el.ratio<0,'colorRed':el.ratio>0}">
              <span>{{el.showRatio}}<span v-if="el.ratio">%</span></span>
              <van-icon name="down"  v-if="el.ratio" :class="{'rotate180':el.ratio>0}"/>
            </div>
          </div>
        </div>
      </div>
      <!--会员相关指标-->
      <div class="fontSize18 fontbold subTitle mt20" v-show="saleInfo.user.length>0">会员相关指标</div>
      <div class="flex center tableTree mt20" v-show="saleInfo.user.length>0">
        <div class="w20">
          <div class="brandName li fontSize14">指标/品牌</div>
          <div class="li fontSize13 H50 lineH50 tableHTitleBg" v-for="(item,index) in userTitle" :key="index">{{item.name}}</div>
        </div>
        <div v-for="(item,index) in saleInfo.user" :key="index" class="w16">
          <div class="brandName fontSize14 fontbold li">{{item.name}}</div>
          <div v-for="(el,elindex) in item.user" :key="elindex" class="li H50 flex flexColumn flexCenter">
            <div class="colorBlue fontbold">{{el.num}}</div>
            <div class="flex flexCenter alignCenter fontSize12" v-if="el.ratio!=''" :class="{'colorGreen':el.ratio<0,'colorRed':el.ratio>0}">
              <span>{{el.ratio}}<span v-if="el.ratio">%</span></span>
              <van-icon name="down"  v-if="el.ratio" :class="{'rotate180':el.ratio>0}"/>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="maskSty" v-show="isMask">
      <van-loading type="spinner" color="#333" />
      <div class="mt5">加载中</div>
    </div>
    <van-popup v-model="isMonth" round position="bottom">
        <van-picker
          title="请选择月份"
          show-toolbar
          value-key='name'
          :columns="monthColumn"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </van-popup>
      <van-popup v-model="isWeek" round position="bottom">
        <van-picker
          title="请选择周"
          show-toolbar
          value-key='name'
          :columns="weekColumn"
          @confirm="weekConfirm"
          @cancel="weekCancel"
        />
      </van-popup>
      <van-calendar v-model="isDate" color='#4873c1' @confirm="onConfirmDate" />
  </div>
</template>

<script>
export default {
  name: "salesReport",
  data() {
    return {
      dateVal:'',
      isDate:false,
      isMask:false,
      active:0,
      show: false,
      fieldValue: '',
      cascaderValue: '',
      fieldNames:{
        text:'name',value:'value',children:'sub'
      },
      options:[],
      saleInfo:{
        channel:[],
        total:[{tit:'ELLASSAY',num:0,showRatio:0},{tit:'LAURÈL',num:0,showRatio:0},{tit:'IRO',num:0,showRatio:0},{tit:"SP",num:0,showRatio:0},{tit: "ED",num:0,showRatio:0}],
        user:[]
      },
      allData:{},
      channelTitle:[],
      userTitle:[],
      year:0,
      month:0,
      week:'',
      monthColumn:[],
      isMonth:false,
      weekColumn:[],
      isWeek:false,
      //monthStr:'1月',
      monthStr:'',
      weekStr:'',
      channelArr:[],
      userArr:[]
    };
  },
  created() {
    var date=new Date()
    var preDate=new Date(date.getTime() - (24*60*60*1000))
    let year=preDate.getFullYear()
    let month=preDate.getMonth() + 1
    let day= preDate.getDate()
    this.dateVal=`${year}-${month}-${day}`
    console.log('年月日',year,month,day)
    this.getTime()
    this.getBrandDataList()
  },
  //components: {  },
  methods: {
    getActive(name,title){
      this.active=name
      this.active==0?this.year=0:''
      this.active==1?this.year=2021:''
      this.active==2?this.year=2020:''
      if(this.active>0){
        this.week=0
        let date= new Date()
        let month=date.getMonth()
        let day=date.getDate()

        if(day===1){//每月一号，则要取到上个月
          month==0?this.month=12:this.month=month
          this.monthStr= this.month+'月'
        }else{
          this.monthStr=(month+1)+'月'
          this.month=(month + 1)
        }
        // console.log('month',this.month)
        // console.log('day',day)
        this.weekStr=''
        this.getTime()
      }
      this.getBrandDataList()
    },
    getTime(){
      let that=this
      this.$apiRequest.getTimeForYear({year:'2021'}).then(res=>{
        console.log('获取时间',res)
        let weekArr=[]
        res.data.map(i=>{
          i.value=i.month
          i.name=i.month+'月'
          
          i.sub.map(e=>{
            e.value=e.weeks
            e.name=`第${e.week}周`
          })
          if(that.month==i.value){//匹配周
            that.weekColumn=i.sub
          }
        })
        that.monthColumn=res.data
        //this.weekColumn=res[0].sub
        // if(this.monthStr=='1月'){//代表没有点击选择过月份
        //   this.weekColumn=res[0].sub
        // }
        that.options=res
        // alert('请求成功了')
      }).catch(err=>{
        that.isMask=false
        // alert('请求失败了',err)
      })
    },
    getBrandDataList(){
      let that=this
      let obj={
        year:this.year,
        month:this.month,
        week:this.week
      }
      if(this.active==0){
        obj.year=0
        obj.month=0
        obj.week=0
      }
      console.log('obj---------',obj)
      this.isMask=true
      this.$apiRequest.getBrandDataList(obj).then(res=>{
        console.log('销售列表',res)
        that.isMask=false
        res.data.total.map(i=>{
          i.showRatio=i.ratio
          if(i.ratio&&i.ratio<0){
            i.showRatio=Math.abs(i.ratio)
          }
        })
        res.data.channel.map(i=>{
          i.channel.map(e=>{
            e.showRatio=e.ratio
            if(e.ratio&&e.ratio<0){
              e.showRatio=Math.abs(e.ratio)
            }
          })
        })
        that.allData=res.data.total.pop()
        that.channelTitle=res.data.channel[0].channel
        that.userTitle=res.data.user[0].user
        //that.userArr=
        that.saleInfo=res.data
      }).catch(err=>{
        that.isMask=false
      })
    },
    onConfirm(val){//月份选择
      console.log('选择确定',val)
      this.monthStr=val.name
      this.isMonth=false
      this.month=val.value
      this.week=0
      this.weekStr=''
      this.weekColumn=val.sub
      this.getBrandDataList()
    },
    onCancel(){//月份取消选择
      this.isMonth=false
    },
    weekConfirm(val){
      console.log('选择周',val)
      this.isWeek=false
      this.week=val.week
      this.weekStr=val.name
      this.getBrandDataList()
    },
    weekCancel(){
      this.isWeek=false
    },
    onConfirmDate(date){
      console.log('确认日期',date)
      this.isDate=false
      let activeDate=`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      console.log('activeDate',activeDate)
      this.dateVal=activeDate
      this.getBrandDataList()
      // this.dateList=[{text:activeDate,value:date.getDate()}]
      // this.dateVal=date.getDate()
      // this.nowDate=activeDate
      // this.getDayReportByRegion()
    }
  },
};
</script>
<style lang='less'>
@import '../assets/css/style';
.van-tabs__nav--card{
  border:1px rgba(79,111,147) solid
}
.van-tabs__nav--card .van-tab{
  color: rgba(79,111,147);
  border-right: 1px rgba(79,111,147) solid;
}
.van-tabs__nav--card .van-tab.van-tab--active{
  background-color: rgba(79,111,147);
}
.van-van-cell__title{width: 4.2rem;}
.pds{padding: 20px 14px;}
.searchPart{border-bottom: 0.06rem #eee solid;}
//.grayBg{background-color: #eee;}
.whiteBg{background-color: #fff;}
.mb4{margin-bottom: 4px;}
.van-tabs__nav--card{
  margin: 0;
}
.van-cell{
  padding: 0 0.16rem;
  margin-top: 0.3rem;
}
.van-cell__title{
  width: 1.2rem;
  text-align: center;
}
.van-cell::after{
  border: 0;
}

.spantree{
  width: 33.33333333%;
}
.van-col{
  text-align: center;
  margin-top: 0.4rem;
}
.reportPart{
  .subTitle{
    border-bottom: 1px #ddd solid;
    padding-bottom: 6px;
  }
  .allCount{
    margin: 0 0.04rem 0 0.14rem;
  }
}
.colorBlue{
  color: rgba(79,111,147);
}
.rotate180{transform: rotate(180deg);}
.tableTitle{
  background-color: #f5f7fa;
    li{
      padding: 0.06rem;
      border: 0.01rem #ebeef5 solid;
    }
}
.tableContent{
  li{
    padding: 0.1rem;
    border: 0.01rem #ebeef5 solid;
  }
}
.w20{width: 20%;}
  .w16{width: 16%;}


.tableTree{
  .brandName{
    background-color: #f5f7fa;
    height: 0.6rem;
  }
  .li{
    padding: 0.06rem;
    border: 0.01rem #ebeef5 solid;
  }
  .H50{
    height: 1rem;
  }
  .lineH50{
    line-height: 1rem;
  }
}
.maskSty{
  text-align: center;
  background-color: rgba(0,0,0,0.2);
  width: 2.6rem;
  border-radius: 0.1rem;
  padding: 0.2rem 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.tableHTitleBg{
  background-color: #f5f7fa;
}
</style>
